import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import {
  Card,
  Avatar,
  Rate,
  Tag,
  Button,
  Divider
} from 'antd';
import {
  ArrowLeftOutlined,
  UserOutlined,
  FileTextOutlined,
  CalendarOutlined,
  StarOutlined
} from '@ant-design/icons';
import './DoctorDetail.css';

// 模拟医师数据
const doctorData = {
  id: 1,
  name: '张景明',
  title: '副主任医师',
  department: '中医理疗科',
  hospital: '本草轩中医理疗馆（总店）',
  avatar: 'https://picsum.photos/id/1005/200/200',
  rating: 4.9,
  reviewCount: 236,
  experience: 15,
  intro: '从事中医理疗临床工作15年，擅长运用推拿、艾灸、针灸结合的方式调理颈肩腰腿痛、亚健康状态等问题。曾发表中医理疗相关论文8篇，获市级中医药成果奖2项。对待患者耐心细致，会根据不同体质制定个性化理疗方案，深受患者好评。',
  specialties: [
    '颈肩腰腿痛调理',
    '中医艾灸养生',
    '经络疏通疗法',
    '亚健康状态调理',
    '腰椎间盘突出康复',
  ],
  schedule: [
    { day: '周一', time: '09:00-12:00, 14:00-18:00', available: true },
    { day: '周二', time: '09:00-12:00, 14:00-18:00', available: true },
    { day: '周三', time: '休息', available: false },
    { day: '周四', time: '09:00-12:00, 14:00-18:00', available: true },
    { day: '周五', time: '09:00-12:00, 14:00-18:00', available: true },
    { day: '周六', time: '09:00-12:00', available: true },
    { day: '周日', time: '休息', available: false },
  ],
};

const DoctorDetail = () => {
  const navigate = useNavigate();
  const [selectedDay, setSelectedDay] = useState(null);
  const [loading, setLoading] = useState(false);

  // 处理返回
  const handleBack = () => {
    navigate(-1);
  };

  // 处理日期选择
  const handleDaySelect = (day, available) => {
    if (!available) {
      Toast.show({
        content: '该日期不可预约，请选择其他日期',
        duration: 1500,
      });
      return;
    }

    setSelectedDay(day);
  };

  // 处理预约
  const handleReserve = () => {
    if (!selectedDay) {
      Toast.show({
        content: '请选择出诊日期',
        duration: 1500,
      });
      return;
    }

    setLoading(true);
    // 模拟预约请求
    setTimeout(() => {
      Toast.show({
        content: `已成功预约${selectedDay}的门诊`,
        duration: 1500,
      });
      setLoading(false);
      // 实际项目中可跳转至预约成功页面
      // navigate('/reservation-success', { state: { doctor: doctorData, selectedDay } });
    }, 1000);
  };

  return (
    <div className="doctor_d_container">
      {/* 导航栏 */}
      <div className="doctor_d_nav-bar">
        <Button
          className="doctor_d_back-btn"
          onClick={handleBack}
          icon={<ArrowLeftOutlined />}
          size="large"
          type="text"
        />
        <h1 className="doctor_d_page-title">医师详情</h1>
      </div>

      {/* 医师基础信息卡片 */}
      <Card className="doctor_d_card">
        <div className="doctor_d_header">
          <Avatar
            src={doctorData.avatar}
            alt={doctorData.name}
            className="doctor_d_avatar"
          />
          <div className="doctor_d_info">
            <div className="doctor_d_name-title">
              <h2 className="doctor_d_name">{doctorData.name}</h2>
              <Tag className="doctor_d_title-tag">
                {doctorData.title}
              </Tag>
            </div>
            <p className="doctor_d_department">
              {doctorData.department} · {doctorData.hospital}
            </p>
            <div className="doctor_d_rating">
              <Rate value={doctorData.rating} disabled />
              <span className="doctor_d_rating-text">
                {doctorData.rating} ({doctorData.reviewCount}条评价)
              </span>
            </div>
            <p className="doctor_d_experience">
              执业经验：{doctorData.experience}年
            </p>
          </div>
        </div>
      </Card>

      {/* 医师简介卡片 */}
      <Card className="doctor_d_card">
        <div className="doctor_d_card-header">
          <UserOutlined className="doctor_d_card-icon" />
          <h3 className="doctor_d_card-title">医师简介</h3>
        </div>
        <Divider className="doctor_d_card-divider" />
        <p className="doctor_d_intro">{doctorData.intro}</p>
      </Card>

      {/* 擅长领域卡片 */}
      <Card className="doctor_d_card">
        <div className="doctor_d_card-header">
          <FileTextOutlined className="doctor_d_card-icon" />
          <h3 className="doctor_d_card-title">擅长领域</h3>
        </div>
        <Divider className="doctor_d_card-divider" />
        <div className="doctor_d_specialties-container">
          {doctorData.specialties.map((item, index) => (
            <Tag key={index} className="doctor_d_specialty-tag">
              {item}
            </Tag>
          ))}
        </div>
      </Card>

      {/* 出诊时间卡片 */}
      <Card className="doctor_d_card">
        <div className="doctor_d_card-header">
          <CalendarOutlined className="doctor_d_card-icon" />
          <h3 className="doctor_d_card-title">出诊时间</h3>
        </div>
        <Divider className="doctor_d_card-divider" />
        <div className="doctor_d_schedule-container">
          {doctorData.schedule.map((item, index) => (
            <div
              key={index}
              className={`doctor_d_schedule-item ${
                !item.available ? 'doctor_d_unavailable' : ''
              } ${selectedDay === item.day ? 'doctor_d_selected' : ''}`}
              onClick={() => handleDaySelect(item.day, item.available)}
            >
              <div className="doctor_d_schedule-day">{item.day}</div>
              <div className="doctor_d_schedule-time">{item.time}</div>
              <Tag
                className={item.available ? 'doctor_d_status-available' : 'doctor_d_status-unavailable'}
                disabled={!item.available}
              >
                {item.available ? '可预约' : '不可预约'}
              </Tag>
            </div>
          ))}
        </div>
      </Card>

      {/* 底部预约按钮 */}
      <div className="doctor_d_reserve-bar">
        <Button
          className="doctor_d_reserve-btn"
          onClick={handleReserve}
          loading={loading}
          disabled={!selectedDay}
        >
          <CalendarOutlined className="doctor_d_reserve-icon" />
          立即预约
        </Button>
      </div>
    </div>
  );
};

export default DoctorDetail;
